<template>
  <div>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="关键词:">
        <el-input v-model="form.keyword" placeholder="请输入" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="manage_video_list">查询</el-button>
        <el-button type="warning" @click="add_code"
          >生成一个会员兑换码</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="list" border stripe style="width: 100%">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="code" label="兑换码" />
      <el-table-column prop="days" label="有效天数" width="100" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <p>{{ scope.row.status === 1 ? "未使用" : "已兑换" }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="ctime" label="创建时间" width="170" />
      <el-table-column prop="uptime" label="更新时间" width="170" />
      <el-table-column prop="" label="兑换信息" width="260">
        <template #default="scope">
          <div v-if="scope.row?.user_name">
            <p>用户名：{{scope.row?.user_name}}</p>
            <p>有效期：{{scope.row?.user_startdate }} - {{scope.row?.user_enddate}}</p>
          </div>
          <div v-else>
            <p>无</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template #default="scope">
          <el-button
            :disabled="scope.row.status === 2"
            link
            type="primary"
            size="small"
            @click="handle_show(scope.row.id)"
            >更新兑换码信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="list_total !== 0"
      class="my-30px flex flex-justify-center flex-items-center"
      background
      layout="prev, pager, next"
      :total="list_total"
      page-size="10"
      @current-change="handleCurrentChange"
    />

    <el-dialog v-model="code_show" title="更新兑换码信息" width="500" center>
      <el-form :model="code_form" :rules="code_rules" ref="code">
        <el-form-item label="有效天数:">
          <el-select v-model="code_form.days" placeholder="请选择">
            <el-option
              v-for="item in days_list"
              :label="item"
              :value="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  exchange_code_list,
  build_exchange_code,
  update_exchange_code,
} from "@/api/index";
import { code_rules } from "../data.config";

const days_list = [1, 14, 30, 90, 183, 365, 730];
const form = reactive({
  page: 1,
  page_size: 10,
  status: "1",
});
const code_form = reactive({
  code_id: "",
  days: "",
  remark: "",
});
const list = ref([]);
const code_show = ref(false);
const code = ref();
const code_id = ref();
const list_total = ref(0);

// 分页处理
const handleCurrentChange = (val) => {
  form.page = val;
  get_exchange_code_list();
};

const handle_show = (id) => {
  code_form.code_id = id;
  code_show.value = true;
};

const submit = async () => {
  if (!code.value) return;
  await code.value.validate(async (valid, fields) => {
    if (valid) {
      const { data, code } = await update_exchange_code(code_form);
      if (code === 200) {
        ElMessage.success("更新成功");
        code_show.value = false;
        code_form.days = "";
        code_form.remark = "";
        get_exchange_code_list();
      } else {
        ElMessage.error("更新失败！");
      }
    } else {
    }
  });
};

const get_exchange_code_list = async () => {
  const {
    data: { data, total },
  } = await exchange_code_list(form);
  list.value = data;
  list_total.value = total;
  console.log("total", total);
};
get_exchange_code_list();

const add_code = async () => {
  const { data, code } = await build_exchange_code();
  if (code === 200) {
    ElMessage.success("生成成功");
    get_exchange_code_list();
  } else {
    ElMessage.error("生成失败！");
  }
};
</script>

<style scoped></style>
